<template>
  <div class="detail">
      <div class="detail-t">
        <div class="nav flex justify-center">
          <div style="width: 45vw" class="flex justify-between items-center tabs">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              :class="`tab 
              ${index == activeIndex && index == 0  ? 'active' : ''}
              ${index == activeIndex && index == 1  ? 'active1' : ''}
              ` "
              @click="changeTab(index)"
            >
              {{ tab.title }}
            </div>
          </div>
      </div>
      <div class="detail-item">
        <div class="month-pay">月均还款(元): {{monthPay.toFixed(0)}}</div>
        <div>
          <ul class="flex flex-wrap">
            <li>还款总额(万): {{allMoney}}</li>
            <li>贷款总额(万): {{loanMoney}}</li>
            <li>支付利息(万): {{(totalInterest/10000).toFixed(2)}}</li>
            <li v-if="syears">商业贷款月数: {{syears*12}}</li> 
            <li v-if="gyears">公积金贷款月数: {{gyears*12}}</li> 
          </ul>
        </div>
      </div>
      </div>
      <table class="tags">
        <tr class="flex tags-list">
          <!-- <th
          v-for="(item, index) in tags"
          :key='index'>
              {{item.name}}
          </th> -->
          <th style="width:13vw">月份</th>
          <th style="width:18vw">月供</th>
          <th style="width:20vw">月供本金</th>
          <th style="width:20vw">月供利息</th>
          <th style="width:29vw">剩余贷款</th>
        </tr>
      </table>
      <div class="monthPayList">
          <div
          class="monthPayItem"
          v-for="(yearItem, yearIndex) in yearsList"
          :key="yearIndex"
          >
          <div class="year-num">第{{yearIndex + 1}}年</div>
          <table class="month-table">
              <tr class="table-item flex"
                v-for="(monthItem, monthIndex) in yearItem.monthsList"
                :key="monthIndex">
                  <td style="width:13vw">{{monthIndex + 1}}月</td>
                  <td style="width:18vw">￥{{monthItem.monthPayAll}}</td>
                  <td style="width:20vw">￥{{monthItem.monthPayCapital}}</td>
                  <td style="width:20vw">￥{{monthItem.monthpAYInterest}}</td>
                  <td style="width:29vw">￥{{monthItem.remainingLoan}}</td>
              </tr>
          </table>
          </div>
      </div>
  </div>
</template>
<script>
/**
 * time: 2020-12-03
 * name: Bevis
 * desc: add
 * parmas
  *totalPrice", "loanMoney", "years", "finalRate","type"
  * 总价
  *贷款总额（商业、公积金>>>下同）
  *年限
  *利率
  *类型
 */
import LoanCaculate from "./LoanCaculate"
export default {
  // props: ["monthPay", "loanMoney", "years", "totalInterest","currIndex"],
  props:["totalPrice", "sloanMoney", "gloanMoney","syears", "gyears","sfinalRate", "gfinalRate"],
  data(){
    return{
      activeIndex: 0,
       tabs: [
          { title: "等额本息", url: "" },
          { title: "等额本金", url: "" },
        ],
        tags:[
          {
            name: '月份'
          },
          {
            name: '月供'

          },
          {
            name: '月供本金'

          },
          {
            name: '月供利息'

          },
          {
            name: '剩余贷款'

          }
        ],
        monthPay: 0,
        allmoneyPay: [],
        totalInterest: 0,
        allMoney: 0,
        yearsList: [],
        loanMoney: 0,
        years: 0,
        finalRate: 0,
    }
  },
  computed:{
  },
  mounted(){
    this.loanMoney = (+this.sloanMoney) + (+this.gloanMoney)  //  总的贷款额度;
    this.years = this.syears || this.gyears;  //  总年限
    // this.years = +(this.syears || this.gyears);
    // this.finalRate = +(this.sfinalRate || this.gfinalRate);
    // console.log("总价",this.totalPrice)
    console.log("贷款总额",this.loanMoney)
    console.log("贷款年限",this.syears)
    console.log("利率",this.sfinalRate)

    console.log("贷款总额",this.gloanMoney)
    console.log("贷款年限",this.gyears)
    console.log("利率",this.gfinalRate)
    this.caculateAcpi();  // 默认等额本息
  },
  methods: {
    getYearsList(){
      //  本息
       let obj1 = {},
            obj2 = {},
            list1 = [],  // 年
            list2 = [];  // 月
        //  月供本金 、 利息
        let aM = this.allMoney * 10000;
      if(!this.allmoneyPay.length){
        //  组合贷 
        if(this.syears && this.gyears){
            for (let x = 0; x < this.years*12; x++) {
            let smc = LoanCaculate.MonthCapital(this.sfinalRate/100,this.sloanMoney*10000, this.syears*12, (x + 1)),
                gmc = LoanCaculate.MonthCapital(this.gfinalRate/100,this.gloanMoney*10000, this.gyears*12, (x + 1)),
                mc = smc + gmc;
            // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
            aM = aM - this.monthPay;  //  剩余贷款
            obj2 = {
                  monthPayAll: parseInt(this.monthPay),
                  monthPayCapital: parseInt(mc),
                  monthpAYInterest: parseInt(this.monthPay - mc),
                  remainingLoan: parseInt(aM)
                },
            list2.push(obj2)
          }
        }else if(!this.syears && this.gyears){
        //  公积金贷款
          for (let x = 0; x < this.years*12; x++) {
            let gmc = LoanCaculate.MonthCapital(this.gfinalRate/100,this.gloanMoney*10000, this.gyears*12, (x + 1)),
                mc = gmc;
            // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
            aM = aM - this.monthPay;  //  剩余贷款
            obj2 = {
                  monthPayAll: parseInt(this.monthPay),
                  monthPayCapital: parseInt(mc),
                  monthpAYInterest: parseInt(this.monthPay - mc),
                  remainingLoan: parseInt(aM)
                },
            list2.push(obj2)
          }
        }else if(this.syears && !this.gyears){
          //  商贷
          for (let x = 0; x < this.years*12; x++) {
                    let smc = LoanCaculate.MonthCapital(this.sfinalRate/100,this.sloanMoney*10000, this.syears*12, (x + 1)), //  月供本金
                        mc = smc;
                    // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
                    aM = aM - this.monthPay;  //  剩余贷款
                    obj2 = {
                          monthPayAll: parseInt(this.monthPay),
                          monthPayCapital: parseInt(mc),
                          monthpAYInterest: parseInt(this.monthPay - mc),
                          remainingLoan: parseInt(aM)
                        },
                    list2.push(obj2)
                  }
        }
        let num = 0;
         for (let i = 1; i <= this.years; i++) {
                obj1 = {
                  monthsList: list2.slice(num, num += 12)
                }
                list1.push(obj1);             
        }
      }else{
        //  本金
        if(this.syears && this.gyears){
            for (let x = 1; x <= this.years*12; x++) {
            let smc = LoanCaculate.MonthCapitaldj(this.sfinalRate/100,this.sloanMoney*10000, this.syears*12, x),  //  月供本金
                gmc = LoanCaculate.MonthCapitaldj(this.gfinalRate/100,this.gloanMoney*10000, this.gyears*12, x),
                mc = smc + gmc;

            // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
            aM = aM - this.allmoneyPay[x];  //  剩余贷款
            obj2 = {
                  monthPayAll: parseInt(this.allmoneyPay[x]),
                  monthPayCapital: parseInt(mc),
                  monthpAYInterest: parseInt(this.allmoneyPay[x] - mc),
                  remainingLoan: parseInt(aM)
                },
            list2.push(obj2)
        }
        let num = 0;
         for (let i = 1; i <= 20; i++) {
                obj1 = {
                  monthsList: list2.slice(num, num += 12)
                }
                list1.push(obj1);             
        }
        }
        else if(!this.syears && this.gyears){
            for (let x = 1; x <= this.years*12; x++) {
          let  gmc = LoanCaculate.MonthCapitaldj(this.gfinalRate/100,this.gloanMoney*10000, this.gyears*12, x),
              mc = gmc;

          // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
          aM = aM - this.allmoneyPay[x];  //  剩余贷款
          obj2 = {
                monthPayAll: parseInt(this.allmoneyPay[x]),
                monthPayCapital: parseInt(mc),
                monthpAYInterest: parseInt(this.allmoneyPay[x] - mc),
                remainingLoan: parseInt(aM)
              },
          list2.push(obj2)
        }
        let num = 0;
         for (let i = 1; i <= 20; i++) {
                obj1 = {
                  monthsList: list2.slice(num, num += 12)
                }
                list1.push(obj1);             
        }
        }
        else if(this.syears && !this.gyears){
            for (let x = 1; x <= this.years*12; x++) {
          let smc = LoanCaculate.MonthCapitaldj(this.sfinalRate/100,this.sloanMoney*10000, this.syears*12, x),  //  月供本金
              mc = smc;

          // let mi = LoanCaculate.MonthInerest(this.finalRate/100,this.loanMoney*10000, this.years*12, x)
          aM = aM - this.allmoneyPay[x];  //  剩余贷款
          obj2 = {
                monthPayAll: parseInt(this.allmoneyPay[x]),
                monthPayCapital: parseInt(mc),
                monthpAYInterest: parseInt(this.allmoneyPay[x] - mc),
                remainingLoan: parseInt(aM)
              },
          list2.push(obj2)
        }
        let num = 0;
         for (let i = 1; i <= 20; i++) {
                obj1 = {
                  monthsList: list2.slice(num, num += 12)
                }
                list1.push(obj1);             
        }
        }

      }
        
        this.yearsList = list1;
     },
     //  计算月供, 总利息
    caculateAcpi() {
        let that = this;
        /**
         * 组合贷款：
         * 月供 = 商贷月供 + 公积金月供
         */
         if(this.syears && this.gyears){
            that.monthPay = LoanCaculate.Acpi(that.sfinalRate/100,that.sloanMoney*10000, that.syears*12) + LoanCaculate.Acpi(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12);
            let smonthPay = LoanCaculate.Acpi(that.sfinalRate/100,that.sloanMoney*10000, that.syears*12),
                gmonthPay = LoanCaculate.Acpi(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12);

            that.totalInterest = (smonthPay*that.syears*12 - that.sloanMoney*10000) + (gmonthPay*that.gyears*12 - that.gloanMoney*10000);  //  本息利息 = 商贷利息 + 公积金利息
            that.allMoney = (that.loanMoney + that.totalInterest/10000).toFixed(2);
            that.getYearsList();
        }
        else if(!this.syears && this.gyears){
            that.monthPay = LoanCaculate.Acpi(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12);
            let gmonthPay = LoanCaculate.Acpi(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12);

            that.totalInterest = gmonthPay*that.gyears*12 - that.gloanMoney*10000;  //  本息利息 = 商贷利息 + 公积金利息
            that.allMoney = (that.loanMoney + that.totalInterest/10000).toFixed(2);
            that.getYearsList();
        }
        else if(this.syears && !this.gyears){
            that.monthPay = LoanCaculate.Acpi(that.sfinalRate/100,that.sloanMoney*10000, that.syears*12);
            let smonthPay = LoanCaculate.Acpi(that.sfinalRate/100,that.sloanMoney*10000, that.syears*12);

            that.totalInterest = smonthPay*that.syears*12 - that.sloanMoney*10000;  //  本息利息 = 商贷利息 + 公积金利息
            that.allMoney = (that.loanMoney + that.totalInterest/10000).toFixed(2);
            that.getYearsList();
        }
      
    },
    changeTab(tab) {
       if(this.syears && this.gyears){
          let that = this;
          that.activeIndex = tab;
          if(tab == 0){
            that.allmoneyPay = [];
              that.caculateAcpi();  // 默认等额本息
            }else{
              //  等额本金 包含首月
              that.allMoney = 0;
              let all = 0;
              for(let month=-1; month < that.years*12 -1;month++){  
                //  本金还款的月供
                let item = LoanCaculate.AverageCapital(that.sfinalRate/100,that.sloanMoney*10000, that.syears*12, month) + LoanCaculate.AverageCapital(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12, month);
                that.allmoneyPay.push(item)
                all+= item;
            }
            console.log(all, that.sloanMoney, that.gloanMoney)
            that.totalInterest = all - ((that.sloanMoney + that.gloanMoney)*10000);  //  总利息
            that.allMoney = (all/10000).toFixed(2);  //  本金利息
            let j = 1;
            that.monthPay = that.allmoneyPay[j];  //  首月
            that.getYearsList();   
          } 
        }
        else if(!this.syears && this.gyears){
            let that = this;
            that.activeIndex = tab;
            if(tab == 0){
              that.allmoneyPay = [];
                that.caculateAcpi();  // 默认等额本息
              }else{
                //  包含首月
                that.allMoney = 0;
                let all = 0;
                for(let month=-1; month < that.years*12 -1;month++){  
                  //  
                  let item = LoanCaculate.AverageCapital(that.gfinalRate/100,that.gloanMoney*10000, that.gyears*12, month);
                  that.allmoneyPay.push(item)
                  all+= item;
              }
                console.log(all, that.sloanMoney, that.gloanMoney)
                that.totalInterest = all - that.gloanMoney*10000;  //  总利息
                that.allMoney = (all/10000).toFixed(2);  //  本金利息
                let j = 1;
                that.monthPay = that.allmoneyPay[j];  //  首月
                that.getYearsList();   
              } 
        }
        else if(this.syears && !this.gyears){
              let that = this;
              that.activeIndex = tab;
              if(tab == 0){
                that.allmoneyPay = [];
                  that.caculateAcpi();  // 默认等额本息
                }else{
                  //  包含首月
                  that.allMoney = 0;
                  let all = 0;
                  for(let month=-1; month < that.years*12 -1;month++){  
                    //  
                    let item = LoanCaculate.AverageCapital(that.sfinalRate/100, that.sloanMoney*10000, that.syears*12, month);
                    that.allmoneyPay.push(item)
                    all+= item;
                }
                console.log(all, that.sloanMoney, that.gloanMoney)
                  that.totalInterest = all - that.sloanMoney*10000;  //  总利息
                  that.allMoney = (all/10000).toFixed(2);  //  本金利息
                  let j = 1;
                  that.monthPay = that.allmoneyPay[j];  //  首月
                  that.getYearsList();   
                } 
        }
      
    }
  }
  
  
};
</script>
<style lang="scss" scoped>
.detail{
  width: 100vw;
    .tabs{
      border: 1px solid #fff;
      border-radius: 15px;
      margin-top: 10px;
    }
    .active{
      background-color: #fff;
      color: #631853;
      border-radius: 15px 0 0 15px;
    }
    .active1{
      background-color: #fff;
      color: #631853;
      border-radius: 0 15px 15px 0;
    }
    .tab{
      padding: 0px 10px;
    }
    .detail-t{
    background: #4687f2;
    color: #fff;
    padding: 9px 14px;
    .detail-item{
      .month-pay{
        line-height: 5vh;
        margin-top: 2vh;
      }
      ul li{
        width: 45vw;
        line-height: 5vh;
      }
    }
    }
    .monthPayList{
      .monthPayItem{
        .year-num{
          background-color: #eee;
          line-height: 4vh;
          padding-left: 4vw;
        }
      }
      tr td{
        line-height: 5vh;
        display: inline-block;
        text-align: center;

      }
    }
}
</style>